<template>
  <GoogleMap
    :api-key="mapKey"
    style="width: 100%; height: 500px"
    class="mb16"
    :center="center"
    :zoom="15"
    :fullscreenControl="false"
    :mapTypeControl="false"
    :scrollwheel="true"
    :streetViewControl="false"
    :zoomControl="false"
    ref="mapRef"
    @click="GetClickPoint"
  >
    <Marker :options="mapOptions"
  /></GoogleMap>
</template>

<script lang="ts">
import { GoogleMap, Marker } from "vue3-google-map";
import { center, drawerFormState, defaultModalFormState } from "../store";
import { mapKey } from "@/config/globalVar";
import {
  getCurrentLocation,
  GetClickPoint,
  handleSearch,
  delete_last_string,
} from "../utils";
import fetchApi from "@/utils/fetch";
const mapOptions = reactive({
  position: {
    lat: 0,
    lng: 0,
  },
  label: "L",
  title: "LADY LIBERTY",
});
export default defineComponent({
  name: "MyGoogleMap",
  components: { GoogleMap, Marker },
  setup() {
    getCurrentLocation(({ lat, lng }: any) => {
      center.lat = lat;
      center.lng = lng;
      mapOptions.position.lat = lat;
      mapOptions.position.lng = lng;
    });
    const mapRef = ref<any>(null);
    watch([() => center.lng, () => center.lat], () => {
      if (mapRef.value?.ready) {
        mapRef.value.map.panTo({ lat: center.lat, lng: center.lng });
        mapOptions.position.lat = center.lat;
        mapOptions.position.lng = center.lng;
        fetchApi(
          `/maps/api/geocode/json?language=cn&latlng=${center.lat},${center.lng}&key=${mapKey}`
        )
          .then((res: any) => {
            const firstData = res.results[0];
            drawerFormState.lat = firstData.geometry.location.lat;
            drawerFormState.long = firstData.geometry.location.lng;

            drawerFormState.country =
              firstData.address_components.find((item: any) => {
                return item.types.includes("country");
              })?.long_name ?? "";
            drawerFormState.province =
              firstData.address_components.find((item: any) => {
                return item.types.includes("administrative_area_level_1");
              })?.long_name ?? "";

            drawerFormState.city =
              firstData.address_components.find((item: any) => {
                return item.types.includes("locality");
              })?.long_name ?? "";

            drawerFormState.position_country_code =
              firstData.address_components.find((item: any) => {
                return item.types.includes("country");
              })?.short_name ?? "";
            const locationString =
              drawerFormState.country +
              (drawerFormState.country ? "·" : "") +
              (drawerFormState.province +
                (drawerFormState.province ? "·" : "")) +
              drawerFormState.city;
            defaultModalFormState[2].location =
              delete_last_string(locationString);
            defaultModalFormState[2].searchKey =
              defaultModalFormState[2].location;

            defaultModalFormState[2].content_position_country_code =
              firstData.address_components.find((item: any) => {
                return item.types.includes("country");
              })?.short_name ?? "";
            handleSearch();
          })
          .catch((e) => {
            console.error(e);
          });
      }
    });
    return { mapRef, center, mapKey, GetClickPoint, mapOptions };
  },
});
</script>
